<template>
  <div class="" style="min-height: 500px;" v-loading="loading" element-loading-background="#FFFFFF">
    <div class="form-wrapper ec-container" v-if="(!row || isMoidfy) && !loading" >
      <div class="material-textfield green ec-width" :class="{'validate-err': errors.has('企业全称')}">
        <input type="text" required v-model="companyName" v-validate="'required'" name="企业全称" :disabled='isDisable'/>
        <label data-content="企业全称"></label>
      </div>

      <div class="material-textfield green ec-width" :class="{'validate-err': errors.has('统一社会信用代码')}">
         <input type="text" required v-model="socialCreditCode" v-validate="'required'" name="统一社会信用代码"/>
         <label data-content="统一社会信用代码"></label>
      </div>
      <div class="material-textfield green ec-width" :class="{'validate-err': errors.has('法人代表')}">
         <input type="text" required v-model="legalRepresentative" v-validate="'required|max:10'" name="法人代表"/>
         <label data-content="法人代表"></label>
      </div>
      <div class="bus-lin" :class="{'validate-err': errors.has('营业执照扫描件')}">
        <label>营业执照扫描件</label>
        <file-upload
          ref="upload"
          :drag="true"
          :is-display="true"
          list-type="picture"
          class-name="upload-demo title-img"
          :limit="1"
          accept="image/*, .jpg, .png, .jpeg"
          v-model="businessLicense"
          v-validate="'required|fileupload'"
          name="营业执照扫描件"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </file-upload>
      </div>
      <div class="">
        <el-button type="success width-min-200" round @click="confirm()" :disabled="row && row.approveStatus === 'WAIT'">
          <span>提交认证</span>
          <span v-if="row && row.approveStatus === 'WAIT'">审核中，请耐心等待...</span>
        </el-button>
      </div>
    </div>

    <div class="ec-container flex-column-center promp-msg" v-if="row && row.approveStatus === 'WAIT' && !isMoidfy">
      <img src="../assets/shenhezhong.jpg" alt="">
      <h2>提交成功</h2>
      <p>需要三个工作日，请等待。。。</p>
      <el-button type="success" round @click="modify()">查看认证表</el-button>
    </div>
    <div class="ec-container flex-column-center promp-msg" v-if="row && row.approveStatus === 'SUCCESS' && !isMoidfy">
      <img src="../assets/shenhetongguo.jpg" alt="">
      <h2>恭喜您！认证已经通过</h2>
      <p>您可以前往企业主页设置您的主页了</p>
      <el-button type="success" class="width-200" round @click="modify()">更新认证表</el-button>
      <el-button type="success" class="width-200" round @click="ecedit()" style="margin-left: 0px;margin-top: 20px;">编辑企业</el-button>
    </div>
    <div class="ec-container flex-column-center promp-msg" v-if="row && row.approveStatus === 'FAIL' && !isMoidfy">
      <img src="../assets/shenheshibai.jpg" alt="">
      <h2>很抱歉！您的申请未能通过！</h2>
      <p>原因：{{row.reason}}</p>
      <el-button type="success" round @click="modify()">重新编辑认证表</el-button>
    </div>
  </div>

</template>

<script>
import axios from 'axios'


  export default {
    title: '企业认证',
    name: 'enterprise-certification',
    data () {
      return {
        companyName: '',
        socialCreditCode: '',
        legalRepresentative: '',
        businessLicense: '',
        isUp: true,
        dialogImg: false,
        row: null,
        isMoidfy: false,
        loading: true
      }
    },
    mounted () {
      this.getEc()
    },
    methods: {
      getEc () {
        axios.post('/mscs/certificate/findCerificateInfoByUserid', this.$paramsConvert({userId: this.$store.state.user.user.user.userId})).then((res) => {
          if (res.data.code === 1) {
            this.row = res.data.data
          } else {
            // 表示用户还没有进行认证过
            if (res.data.data !== '用户未提交企业认证信息') {
              this.$codeError(res)
            }
          }
        }).catch((error) => {
          this.$catchError(error)
        }).finally(() => {
          this.loading = false
        })

      },
      confirm () {
        // 如果已经是企业用户了，表明已经提醒过了，不在提醒
        if (!this.isDisable) {
          this.$alert('提交审核成功之后公司名称不可再编辑，如需变更请联系管理员。点击确认后提交认证资料，如需再确认请点击右上角关闭', {
            confirmButtonText: '确定',
            callback: action => {
              if (action === 'confirm') {
                this.saveEc()
              }
            }
          })
        } else {
          this.saveEc()
        }
        
      },
      saveEc () {
        this.$validator.validate().then(result => {
          if (result) {
            axios.post('/mscs/certificate/addCertificationEnterprise', {businessLicense: this.businessLicense,
            companyName: this.companyName, socialCreditCode: this.socialCreditCode,
            legalRepresentative: this.legalRepresentative, userId: this.$store.state.user.user.user.userId}).then((res) => {
              if (res.data.code === 1) {
                this.isMoidfy = false
                this.row = {
                  businessLicense: this.businessLicense,
                  companyName: this.companyName,
                  socialCreditCode: this.socialCreditCode,
                  legalRepresentative: this.legalRepresentative,
                  approveStatus: 'WAIT'
                }
                this.$message({
                  message: '提交完成',
                  type: 'success'
                })
              } else {
                this.$codeError(res)
              }
            }).catch((error) => {
              this.$catchError(error)
            })
          } else {
            this.$message({
              showClose: true,
              message: this.$connErmsg(this.$validator.errors.items),
              type: 'error'
            })
          }
        })
      },
      validate () {
        return this.$validator.validateAll()
      },
      modify () {
        this.isMoidfy = true
        this.companyName = this.row.companyName
        this.socialCreditCode = this.row.socialCreditCode
        this.legalRepresentative = this.row.legalRepresentative
        this.businessLicense = this.row.businessLicense
      },
      ecedit () {
        this.$router.push({name: 'ecedit', query: {enterpriseName: this.row.companyName}})
      }
    },
    watch: {
      'authorization' (val) {
        if (val) {
          this.getEc()
        }
      }
    },
    computed: {
      authorization () {
        return this.$store.state.user.token
      },
      isDisable () {
        let type = this.$store.state.user ? this.$store.state.user.user.user.userType : ''
        return type === 'CMEMBER' || type === 'COMPANY'
      },
      fileList () {
        if (this.row && this.row.businessLicense && this.row.businessLicense.length > 20) {
          this.isUp = false
          return [{name: 'qiyezhizhao.png', url: this.row.businessLicense}]
        } else {
          return []
        }
      }
    }
  }
</script>
<style >
  .ec-container {
    padding-top: 60px;
  }
  .ec-container .el-upload-dragger {
    width: 420px;
  }
  .bus-lin {
    width: 420px;
  }
  .bus-lin > label {
    color: #666666;
  }
  .bus-lin .upload-demo {
    margin: 10px 0 45px 0;
  }
  .ec-width {
    width: 420px;
  }
  .ec-container .el-dialog__body {
    overflow: auto;
  }
</style>
